<template>
    <header>
        <div class="closerank">
            <strong></strong>
            <h3>{{ $t("language.order.title") }}</h3>
            <span @click="$openPage('/My')">
                <el-icon color="#fff" size="16">
                    <Close />
                </el-icon>
            </span>
        </div>
    </header>
    <div style="height: 73px"></div>
    <main class="main">
        <h3>{{ parseInt(ordermsg.info.amount) / 100 }}{{ $t('language.informcao.money') }}</h3>
        <span>{{ $t('language.order.money') }}</span>
        <div class="success">
            <p>{{ $t('language.order.buysuccess') }}</p>
            <p>{{ $t('language.order.successText') }}</p>
        </div>
        <div class="pay">
            <span>{{ $t('language.order.paytype') }}: {{ ordermsg.info.payMode == 0 ? 'BRL' : 'USDT' }}</span>
            <div>
                <span>{{ $t('language.order.orderID') }}: {{ ordermsg.info.orderID }}</span>
                <i @click="copyToClipboard(ordermsg.info.orderID, proxy)">{{ $t('language.order.copytext') }}</i>
            </div>
        </div>
        <p>{{ $t('language.order.question') }}<span @click="$openPage('/kefu')">{{ $t('language.order.kefu') }}</span>{{
                $t('language.order.solve')
            }}</p>
        <div class="btns">
            <van-button class="left" @click="$openPage('/rechange', { index: 0 })">{{
                $t("language.order.continue")
            }}</van-button>
            <van-button class="right" @click="$openPage('/rechange', { index: 1, orderID: ordermsg.info.orderID })">{{
                $t("language.order.lookrecord")
                }}</van-button>
        </div>

    </main>
</template>
<script setup lang="ts">
import { copyToClipboard } from "@/utils/common";
import { getCurrentInstance, computed, ref, reactive } from "vue";
import { useStore } from "vuex"
const { proxy } = getCurrentInstance();
const store = useStore()
let paymentinfo: any = computed(() => store.state.Orderinfo)
let info: any = computed(() => store.state.info)
// 数据初始化
let ordermsg = reactive({
    info: {
        amount: "",
        orderID: "",
        payMode: 0
    }
})
let initData = () => {
    console.log(paymentinfo.value, 'ppppp');
    proxy.$post("/Payment/v1.0/User/Recharge/Detail", { orderId: paymentinfo.value.orderNo }).then(({ data }) => {
        ordermsg.info = { ...data.data }
    })
   
}
initData()





// onMounted(async () => {
//   const canvas = await QRCode.toDataURL(text);
//   qrCodeSrc.value = canvas;
// });
</script>
<style scoped lang="scss">
header {
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    @include flex(row, space-between, center);
    background-color: rgb(36, 39, 43);
    padding: 30px 15px 9px;
    color: #fff;
    height: 73px;

    .closerank {
        width: 100%;
        @include flex(row, space-between, center);
        padding-bottom: 5px;
        border: none;

        strong {
            width: 30px;
            display: block;
        }

        h3 {
            font-size: 18px;
            color: #fff;
            text-align: center;
            flex: 1;
        }

        span {
            display: block;
            width: 28px;
            height: 28px;
            @include flex(row, center, center);
            border: 2px solid #fff;
            border-radius: 16px;
        }
    }
}

.main {
    width: 100%;
    height: calc(100vh - 72px);
    padding: 30px 15px 40px;
    @include flex(column, flex-start, center);
    background-color: rgb(26, 26, 26);

    h3 {
        font-size: 30px;
        color: #fff;
    }

    >span {
        color: #b5bac8;
        font-size: 14px;
    }

    .success {
        width: 100%;
        background-color: rgb(36, 38, 43);
        padding: 20px 0;
        margin: 30px 0;

        p {
            font-size: 16px;
            color: #b5bac8;
            text-align: center;
        }
    }

    >p {
        font-size: 14px;
        color: #b5bac8;
        text-align: center;
        margin-top: 30px;

        span {
            color: #fff;
            font-size: 14px;
        }
    }

    .pay {
        width: 100%;

        span {
            color: #fff;
            font-size: 14px;
        }

        div {
            margin-top: 5px;
            @include flex(row, space-between, center);

            span {
                font-size: 14px;
            }

            i {
                color: rgb(5, 120, 92);
                font-size: 14px;
                font-style: normal;

            }
        }
    }

    .btns {
        @include flex(row, space-between, center);
        margin-top: 20px;

        .left,
        .right {
            width: 42%;
            height: 38px;

        }

        .right {
            background-color: #0a906c;
            border: 1px solid #0a906c;
            color: #fff;
        }

        .left {
            background-color: transparent;
            color: #0a906c;
            border: 1px solid #0a906c;
        }

    }
}
</style>